{% extends "layout.html" %}

{% block javascript_head %}
  <script src=/_ah/channel/jsapi type=text/javascript></script>
  <script src=/static/js/edit_playlist.js type=text/javascript></script>
  <script src=/static/js/third-party/diff_match_patch.js type=text/javascript></script>
  <script src=https://apis.google.com/js/plusone.js type=text/javascript></script>
  <script type=text/javascript>
    var playlistId = {{ quoted_playlist_id }};
    var uuid = {{ quoted_uuid }};
    var editUrl = {{ quoted_edit_url }};
  </script>
{% endblock %}

{% block page_header %}
  <h1>
    Edit Playlist: <span id=playlist-title>{{ title|escape }}</span>
  </h1>

  <p id=playlist-description>{{ description|escape }}</p>

  <div class=g-plus data-action=share data-annotation=none data-height=20 data-href={{ welcome_page_url }}></div>
{% endblock %}

{% block content %}
  <h3>Partygoers</h3>

  <div id=friends>
    {{ friend_list }}
  </div>

  <div id=edit-playlist-columns>
    <div id=playlist-container>
      <h3>Playlist</h3>

      <div id=playlist>
        {% include "video_list.html" %}
      </div>
    </div>

    <div id=search-container>
      <h3>Search</h3>

      <div class=vertical-spacer>
        <form id=search-form>
          <input type=search id=q results=5 placeholder=Search>
          <input type=submit value=Search>
        </form>
      </div>

      <div id=search-results></div>
    </div>
  </div>

  <div id=yt-player-container>
    <div id=yt-player></div>
  </div>
{% endblock %}